/**
 * @author BoLiang
 */
if (typeof accedo === "undefined") {
	accedo = {};
}
if (typeof accedo.achievement === "undefined") {
	accedo.achievement = {};
}

accedo.achievement.achiPortalShow = {
	mainCtnNode : null,
	userName : null,
	divCurrID : null,
	divTitleCurrID : 0,
	divLength : null,
	moveCount : null,
	minLeft : null,
	maxLeft : null,
	row : 0,
	appListInnerDivNode : null,
	badgeListInnerDivNode : null,
	awardListInnerDivNode : null,
	appTitleDivNode : null,
	badgeTitleDivNode : null,
	awardTitleDivNode : null,
	idPrefix : null,
	innerNode : null,

	ajaxTitleDivNode : null,
	ajaxAppDivNode : null,
	ajaxBadgeDivNode : null,
	ajaxAwardDivNode : null,

	leftArrowNode : null,
	rightArrowNode : null,

	appListLeftArrowDivNode : null,
	appListRightArrowDivNode : null,
	badgeListLeftArrowDivNode : null,
	badgeListRightArrowDivNode : null,
	awardListLeftArrowDivNode : null,
	awardListRightArrowDivNode : null,

	appLength : 0,

	init : function() {
		this.mainCtnNode = null;
		this.userName = null;
		this.divTitleCurrID = 0;
		this.divCurrID = new Array();
		this.divCurrID[0] = 0; 
		this.divCurrID[1] = 0;
		this.divCurrID[2] = 0;
		this.moveCount = new Array(); 
		this.moveCount[0] = 0;
		this.moveCount[1] = 0;
		this.moveCount[2] = 0;
		this.divLength = new Array();
		this.divLength[0] = 0;
		this.divLength[1] = 0;
		this.divLength[2] = 0;
		this.minLeft = new Array(); 
		this.minLeft[0] = 0;
		this.minLeft[1] = 0;
		this.minLeft[2] = 0;
		this.maxLeft = new Array(); 
		this.maxLeft[0] = 0;
		this.maxLeft[1] = 0;
		this.maxLeft[2] = 0;
		this.idPrefix = "AppPortal";
		// this.innerNode = this.appListInnerDivNode; 
		this.appListInnerDivNode = null;
		this.badgeListInnerDivNode = null;
		this.awardListInnerDivNode = null;
		this.appTitleDivNode = null;
		this.badgeTitleDivNode = null;
		this.awardTitleDivNode = null;

		this.ajaxTitleDivNode = null;
		this.ajaxAppDivNode = null;
		this.ajaxBadgeDivNode = null;
		this.ajaxAwardDivNode = null;

		this.leftArrowNode = null;
		this.rightArrowNode = null;

		this.appListLeftArrowDivNode = null;
		this.appListRightArrowDivNode = null;
		this.badgeListLeftArrowDivNode = null;
		this.badgeListRightArrowDivNode = null;
		this.awardListLeftArrowDivNode = null;
		this.awardListRightArrowDivNode = null;

		this.appLength = 0;
		this.oldOnkeydownFunc = document.onkeydown;
		document.onkeydown = function(e) {
			accedo.achievement.achiPortalShow.keysControl(e);
		};
	},

	appendPage : function(username) {
		console.log("PortalShow Page > achiPortalShow.appendPage()");
		
		this.init(); 
		this.userName = username; 
		var mainDiv = this.initMainDiv(); 

		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.appendChild(mainDiv); 

		
		this.initTitleDiv(username);
		this.initAppDiv(username);
		this.initBadgeDiv(username);
		this.initAwardDiv(username);
	},

	appendMainCtnNode : function(username) {
		this.init(); 
		this.userName = username; 
		var threeRowsNode = this.createThreeRows();
		this.initAppDiv(username);
		this.initBadgeDiv(username);
		this.initAwardDiv(username);
		return threeRowsNode;
	},

	/**
	 * initiate the user info sub-div node
	 * @return {div node} user info sub-div node
	 */
	createInfoDiv : function(serverDataObj) {
		 
		/*********************************************************/
		// create the info sub-div node that displayed in up floor
		var infoUpDivNode = document.createElement("div");
		infoUpDivNode.id = "achiPortalInfoUp";
		// create the div of user name, level, and score
		var usernameDivNode = document.createElement("div");
		usernameDivNode.id = "achiPortalInfoUpUsername";
		var levelDivNode = document.createElement("div");
		levelDivNode.id = "achiPortalInfoUpLevel";
		var scoreDivNode = document.createElement("div");
		scoreDivNode.id = "achiPortalInfoUpScore";

		// add the inner HTML content into the relevant div nodes
		usernameDivNode.innerHTML = "<font color=white size=6px>" + serverDataObj.username + "</font>"; 
		levelDivNode.innerHTML = "<font color=white size=6px>LEVEL: " + serverDataObj.level + "</font>"; 
		scoreDivNode.innerHTML = "<font color=white size=6px>SCORE: " + serverDataObj.score + "</font>"; 

		// append the sub-div to the infoUp sub-div
		infoUpDivNode.appendChild(usernameDivNode);
		infoUpDivNode.appendChild(levelDivNode); 
		infoUpDivNode.appendChild(scoreDivNode);  
		/*********************************************************/


		/*********************************************************/
		// create the info sub-div node that displayed in down floor
		var infoDownDivNode = document.createElement("div");
		infoDownDivNode.id = "achiPortalInfoDown";
		// // create the div of progress bar container and progress bar
		// var levelbarCtnDivNode = document.createElement("div");
		// levelbarCtnDivNode.id = "achiPortalInfoDownLevelbarCtn";
		// var levelbarDivNode = document.createElement("div");
		// levelbarDivNode.id = "achiPortalInfoDownLevelbar";

		// // append the level progress bar container and progress bar div nodes
		// levelbarCtnDivNode.appendChild(levelbarDivNode); 
		// infoDownDivNode.appendChild(levelbarCtnDivNode);

		var socialCtnDivNode = document.createElement("div");
		socialCtnDivNode.id = "achiPortalInfoDownSocialCtn"; 

		var socialYourPageDivNode = document.createElement("div");
		socialYourPageDivNode.id = "social0";
		socialYourPageDivNode.className = "socialYourPage";

		var socialYourFriendsDivNode = document.createElement("div");
		socialYourFriendsDivNode.id = "social1";
		socialYourFriendsDivNode.className = "socialYourFriends";

		var socialFriendSearchDivNode = document.createElement("div");
		socialFriendSearchDivNode.id = "social2";
		socialFriendSearchDivNode.className = "socialFriendSearch";

		var socialFacebookDivNode = document.createElement("div");
		socialFacebookDivNode.id = "social3"
		socialFacebookDivNode.className = "socialFacebook";

		var socialTwitterDivNode = document.createElement("div");
		socialTwitterDivNode.id = "social4";
		socialTwitterDivNode.className = "socialTwitter";

		socialCtnDivNode.appendChild(socialYourPageDivNode);
		socialCtnDivNode.appendChild(socialYourFriendsDivNode);
		socialCtnDivNode.appendChild(socialFriendSearchDivNode);
		socialCtnDivNode.appendChild(socialFacebookDivNode);
		socialCtnDivNode.appendChild(socialTwitterDivNode);
		infoDownDivNode.appendChild(socialCtnDivNode); 

		/*********************************************************/



		// create user info sub-div node
		var infoDivNode = document.createElement("div");
		infoDivNode.id = "achiPortalInfo"; 
		infoDivNode.appendChild(infoUpDivNode); 
		infoDivNode.appendChild(infoDownDivNode); 
		return infoDivNode; 
	},

	initTitleDiv : function(username) { 
		UserService._path = "http://"
						  + accedo.achievement.config.serverIP + ":" 
					      + accedo.achievement.config.serverPort + "/" 
						  + accedo.achievement.config.pluginName + "/dwr";
		UserService.getJsonUserByUsername(username,
			this.initTitleDivCallback);
	},

	initTitleDivCallback : function(data) {
		var serverDataObj = eval("(" + data + ")");
		accedo.achievement.achiPortalShow.ajaxTitleDivNode.appendChild(
			accedo.achievement.achiPortalShow.createTitleDiv(serverDataObj));
	},

	/**
	 * initiate the title div node
	 * @return {div node} title div node
	 */
	createTitleDiv : function(serverDataObj) {
		// create title div node
		var titleDivNode = document.createElement("div");
		titleDivNode.id = "achiPortalTitle";

		// create logo sub-div node
		var logoDivNode = document.createElement("div");
		logoDivNode.id = "achiPortalLogo";
		logoDivNode.innerHTML = "<img width=100% height=100% src='http://"
							  + accedo.achievement.config.serverIP + ":" 
							  + accedo.achievement.config.serverPort + "/" 
							  + accedo.achievement.config.pluginName 
							  + "/images/userImages/user" + serverDataObj.userid + ".png' />"

		titleDivNode.appendChild(this.createInfoDiv(serverDataObj)); 
		titleDivNode.appendChild(logoDivNode); 

		return titleDivNode; 
	},

	initAppDiv : function(username) {
		dwr.engine.setPreHook(this.preAppHook); 
		dwr.engine.setPostHook(this.postAppHook);
		UserService._path = "http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/dwr";
		UserService.getJsonAppsnsByUsername(username,
			this.initAppDivCallback);
	},

	preAppHook : function() {
		var loadingAppNode = document.createElement("div");
		loadingAppNode.id = "loadingAppNode";
		loadingAppNode.className = "loadingNode";
		loadingAppNode.innerHTML = "<br /><br /><img width=100px height=100px src='http://"
								 + accedo.achievement.config.serverIP + ":" 
								 + accedo.achievement.config.serverPort + "/" 
								 + accedo.achievement.config.pluginName + "/images/otherImages/loading.gif' />"; 
		accedo.achievement.achiPortalShow.ajaxAppDivNode.appendChild(loadingAppNode);
	},

	postAppHook : function() {
		var loadingAppNode = document.getElementById("loadingAppNode");
		accedo.achievement.achiPortalShow.ajaxAppDivNode.removeChild(loadingAppNode);
	},

	initAppDivCallback : function(data) {
		var serverDataObj = eval("(" + data + ")");
		accedo.achievement.achiPortalShow.ajaxAppDivNode.appendChild(
			accedo.achievement.achiPortalShow.createAppDiv(serverDataObj));
	},
	/**
	 * initiate the application div node
	 * @return {div node} application div node
	 */
	createAppDiv : function(serverDataObj) {
		// create app title sub-div node
		this.appTitleDivNode = document.createElement("div");
		this.appTitleDivNode.id = "achiPortalAppTitle";

		var achiWordNode = document.createElement("div");
		achiWordNode.id = "achiWordNode"; 
		achiWordNode.innerHTML = "<font color=white>Apps</font>";
		this.appTitleDivNode.appendChild(achiWordNode);
		
		// create app list sub-div node
		var appListDivNode = document.createElement("div");
		appListDivNode.id = "achiPortalAppList";
		// create app list left arrow, right arrow and list container
		var appListLeftDivNode = document.createElement("div");
		appListLeftDivNode.id = "achiPortalAppListLeft";

		this.appListLeftArrowDivNode = document.createElement("div");
		this.appListLeftArrowDivNode.id = "appLeftArrow"; 
		this.appListLeftArrowDivNode.className = "achiPortalArrow";
		this.appListLeftArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
											   + accedo.achievement.config.serverIP + ":" 
											   + accedo.achievement.config.serverPort + "/" 
											   + accedo.achievement.config.pluginName + "/images/otherImages/leftArrow.png' />";
		this.appListLeftArrowDivNode.style.visibility = "hidden";
		appListLeftDivNode.appendChild(this.appListLeftArrowDivNode);
		this.leftArrowNode = this.appListLeftArrowDivNode;

		var appListRightDivNode = document.createElement("div");
		appListRightDivNode.id = "achiPortalAppListRight";

		this.appListRightArrowDivNode = document.createElement("div");
		this.appListRightArrowDivNode.id = "appRightArrow"; 
		this.appListRightArrowDivNode.className = "achiPortalArrow";
		this.appListRightArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
											    + accedo.achievement.config.serverIP + ":" 
												+ accedo.achievement.config.serverPort + "/" 
												+ accedo.achievement.config.pluginName + "/images/otherImages/rightArrow.png' />"
		
		this.minLeft[0] = 1080 - ((serverDataObj.appsns.length * 150) + 30);
		this.maxLeft[0] = 0;
		if (this.minLeft[0] >= 0) {
			this.appListRightArrowDivNode.style.visibility = "hidden";
		}

		appListRightDivNode.appendChild(this.appListRightArrowDivNode);
		this.rightArrowNode = this.appListRightArrowDivNode;

		var appListCtnDivNode = document.createElement("div");
		appListCtnDivNode.id = "achiPortalAppListCtn";


		appListDivNode.appendChild(appListLeftDivNode);

		

		appListCtnDivNode.appendChild(this.createAppCell(serverDataObj)); 

		appListDivNode.appendChild(appListCtnDivNode);
		appListDivNode.appendChild(appListRightDivNode);

		// create app div node
		var appDivNode = document.createElement("div");
		appDivNode.id = "achiPortalApp";

		

		// append app title and achi list sub-div nodes to achi div node
		appDivNode.appendChild(this.appTitleDivNode);
		appDivNode.appendChild(appListDivNode);

		return appDivNode; 
	},


	createAppCell : function(serverDataObj) {
		

		this.appListInnerDivNode = document.createElement("div");
		this.appListInnerDivNode.id = "achiPortalAppListInner";
		this.appListInnerDivNode.style.left = "0px"; 
		this.appListInnerDivNode.style.width = 150 * serverDataObj.appsns.length + 30 + "px"; 


		this.divLength[0] = serverDataObj.appsns.length; 
		var cellInterval = 0;
		for (var appCellNum = 0; appCellNum < this.divLength[0]; appCellNum++) {
			var appListCellDivNode = document.createElement("div");

			if (serverDataObj.appsns[appCellNum].state == "none") {
				appListCellDivNode.className = "achiPortalAppListCellSmallGray";
			} else {
				appListCellDivNode.className = "achiPortalAppListCellSmall";
			}

			if (appCellNum == 0 && serverDataObj.appsns[0].state == "none") {
				appListCellDivNode.className = "achiPortalAppListCellBigGray";
			} else if (appCellNum == 0 && serverDataObj.appsns[0].state == "playing" 
					   || appCellNum == 0 && serverDataObj.appsns[0].state == "finished") {
				appListCellDivNode.className = "achiPortalAppListCellBig";
			}
			
			

			cellInterval = cellInterval + 30;
			appListCellDivNode.style.left = cellInterval + "px";

			appListCellDivNode.id = "AppPortal" + appCellNum;

			appListCellDivNode.innerHTML = "<img width=100% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/appImages/" 
				+ serverDataObj.appsns[appCellNum].appsn 
				+ ".png' />"
				+ "<hidden id='" + appListCellDivNode.id + "sn'"
				+ "value='"+ serverDataObj.appsns[appCellNum].appsn + "'/>"
				+ "<hidden id='" + appListCellDivNode.id + "name'"
				+ "value='"+ serverDataObj.appsns[appCellNum].appname + "'/>";

			if (serverDataObj.appsns[appCellNum].state == "finished") {
				var cellStar = document.createElement("div");
				cellStar.id = "cellStar";
				cellStar.className = "cellStar";
				cellStar.innerHTML = "<img width=100% height=100% src='http://"
								   + accedo.achievement.config.serverIP + ":" 
								   + accedo.achievement.config.serverPort + "/" 
								   + accedo.achievement.config.pluginName + "/images/otherImages/cellStar.png' />";
				appListCellDivNode.appendChild(cellStar);
			}
			
			this.appListInnerDivNode.appendChild(appListCellDivNode);
		}
		this.innerNode = this.appListInnerDivNode;
		return this.appListInnerDivNode; 
	},

	initBadgeDiv : function(username) {
		dwr.engine.setPreHook(this.preBadgeHook); 
		dwr.engine.setPostHook(this.postBadgeHook);
		BadgeService._path = "http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/dwr";
		BadgeService.getJsonBadgesByUsername(username,
			this.initBadgeDivCallback);
	},

	preBadgeHook : function() {
		var loadingBadgeNode = document.createElement("div");
		loadingBadgeNode.id = "loadingBadgeNode";
		loadingBadgeNode.className = "loadingNode";
		loadingBadgeNode.innerHTML = "<br /><br /><img width=100px height=100px src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/loading.gif' />"; 
		accedo.achievement.achiPortalShow.ajaxBadgeDivNode.appendChild(loadingBadgeNode);
	},

	postBadgeHook : function() {
		var loadingBadgeNode = document.getElementById("loadingBadgeNode");
		accedo.achievement.achiPortalShow.ajaxBadgeDivNode.removeChild(loadingBadgeNode);
	},

	initBadgeDivCallback : function(data) {
		var serverDataObj = eval("(" + data + ")");
		accedo.achievement.achiPortalShow.ajaxBadgeDivNode.appendChild(
			accedo.achievement.achiPortalShow.createBadgeDiv(serverDataObj));
	},

	/**
	 * create the badge div node
	 * @return {div node} badge div node
	 */
	createBadgeDiv : function(serverDataObj) {
		// create badge title sub-div node
		this.badgeTitleDivNode = document.createElement("div");
		this.badgeTitleDivNode.id = "achiPortalAppTitle";

		var badgeWordNode = document.createElement("div");
		badgeWordNode.id = "badgeWordNode"; 
		badgeWordNode.innerHTML = "<font color=white>Badges</font>";
		this.badgeTitleDivNode.appendChild(badgeWordNode);

		// create badge list sub-div node
		var badgeListDivNode = document.createElement("div");
		badgeListDivNode.id = "achiPortalBadgeList";

		// create badge list left arrow, right arrow and badge container
		var badgeListLeftDivNode = document.createElement("div");
		badgeListLeftDivNode.id = "achiPortalAppListLeft";

		this.badgeListLeftArrowDivNode = document.createElement("div");
		this.badgeListLeftArrowDivNode.id = "badgeLeftArrow"; 
		this.badgeListLeftArrowDivNode.className = "achiPortalArrow";
		this.badgeListLeftArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/leftArrow.png' />"
		this.badgeListLeftArrowDivNode.style.visibility = "hidden";
		badgeListLeftDivNode.appendChild(this.badgeListLeftArrowDivNode);

		var badgeListRightDivNode = document.createElement("div");
		badgeListRightDivNode.id = "achiPortalAppListRight";

		this.badgeListRightArrowDivNode = document.createElement("div");
		this.badgeListRightArrowDivNode.id = "badgeRightArrow"; 
		this.badgeListRightArrowDivNode.className = "achiPortalArrow";
		this.badgeListRightArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/rightArrow.png' />"
		
		this.minLeft[1] = 1080 - ((serverDataObj.badges.length * 150) + 30);
		this.maxLeft[1] = 0;
		if (this.minLeft[1] >= 0) {
			this.badgeListRightArrowDivNode.style.visibility = "hidden";
		}

		badgeListRightDivNode.appendChild(this.badgeListRightArrowDivNode);

		var badgeListCtnDivNode = document.createElement("div");
		badgeListCtnDivNode.id = "achiPortalAppListCtn";

		badgeListDivNode.appendChild(badgeListLeftDivNode);

		

		badgeListCtnDivNode.appendChild(this.createBadgeCell(serverDataObj)); 
		badgeListDivNode.appendChild(badgeListCtnDivNode);
		badgeListDivNode.appendChild(badgeListRightDivNode);

		// create badge div node
		var badgeDivNode = document.createElement("div");
		badgeDivNode.id = "achiPortalBadge";

		// append badge title and badge list sub-div nodes to badge div node
		badgeDivNode.appendChild(this.badgeTitleDivNode);
		badgeDivNode.appendChild(badgeListDivNode);
		 
		return badgeDivNode; 
	},

	createBadgeCell : function(serverDataObj) {
		this.badgeListInnerDivNode = document.createElement("div");
		this.badgeListInnerDivNode.id = "achiPortalAppListInner";
		this.badgeListInnerDivNode.style.left = "0px"; 
		this.badgeListInnerDivNode.style.width = 150 * serverDataObj.badges.length + 30  + "px";

		this.divLength[1] = serverDataObj.badges.length; 
		var cellInterval = 0;
		for (var badgeCellNum = 0; badgeCellNum < this.divLength[1]; badgeCellNum++) {
			var badgeListCellDivNode = document.createElement("div");

			if (serverDataObj.badges[badgeCellNum].state == "none") {
				badgeListCellDivNode.className = "achiPortalAppListCellSmallGray";
			} else {
				badgeListCellDivNode.className = "achiPortalAppListCellSmall";
			}


			// badgeListCellDivNode.className = "achiPortalAppListCellSmall";
			cellInterval = cellInterval + 30;
			badgeListCellDivNode.style.left = cellInterval + "px";
			badgeListCellDivNode.id = "BadgePortal" + badgeCellNum;
			badgeListCellDivNode.innerHTML = 
				"<img width=100% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/badgeImages/" 
				+ serverDataObj.badges[badgeCellNum].badge_sn 
				+ ".png' />"
				+ "<hidden id='" + badgeListCellDivNode.id + "sn'"
				+ "value='"+ serverDataObj.badges[badgeCellNum].badge_sn + "'/>"
				+ "<hidden id='" + badgeListCellDivNode.id + "name'"
				+ "value='"+ serverDataObj.badges[badgeCellNum].badge_name + "'/>";


			if (serverDataObj.badges[badgeCellNum].state == "finished") {
				var cellStar = document.createElement("div");
				cellStar.id = "cellStar";
				cellStar.className = "cellStar";
				cellStar.innerHTML = "<img width=100% height=100% src='http://"
								   + accedo.achievement.config.serverIP + ":" 
								   + accedo.achievement.config.serverPort + "/" 
								   + accedo.achievement.config.pluginName + "/images/otherImages/cellStar.png' />";
				badgeListCellDivNode.appendChild(cellStar);
			}

			this.badgeListInnerDivNode.appendChild(badgeListCellDivNode);
		}

		return this.badgeListInnerDivNode; 
	},

	initAwardDiv : function(username) {
		dwr.engine.setPreHook(this.preAwardHook); 
		dwr.engine.setPostHook(this.postAwardHook);
		CampService._path = "http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/dwr";
		CampService.getJsonCampsByUsername(username,
			this.initAwardDivCallback);
	},

	preAwardHook : function() {
		var loadingAwardNode = document.createElement("div");
		loadingAwardNode.id = "loadingAwardNode";
		loadingAwardNode.className = "loadingNode";
		loadingAwardNode.innerHTML = "<br /><br /><img width=100px height=100px src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/loading.gif' />"; 
		accedo.achievement.achiPortalShow.ajaxAwardDivNode.appendChild(loadingAwardNode);
	},

	postAwardHook : function() {
		var loadingAwardNode = document.getElementById("loadingAwardNode");
		accedo.achievement.achiPortalShow.ajaxAwardDivNode.removeChild(loadingAwardNode);
	},

	initAwardDivCallback : function(data) {
		var serverDataObj = eval("(" + data + ")");
		accedo.achievement.achiPortalShow.ajaxAwardDivNode.appendChild(
			accedo.achievement.achiPortalShow.createAwardDiv(serverDataObj));
	},

	/**
	 * create the award div node
	 * @return {div node} award div node
	 */
	createAwardDiv : function(serverDataObj) {
		// create award title sub-div node
		this.awardTitleDivNode = document.createElement("div");
		this.awardTitleDivNode.id = "achiPortalAppTitle";

		// var awardTitleNameDivNode = document.createElement("div");
		// awardTitleNameDivNode.id = "achiPortalAppTitleName";
		// awardTitleNameDivNode.innerHTML = "<font color=white>AWARDS:</font>";
		// this.awardTitleDivNode.appendChild(awardTitleNameDivNode);
		var awardWordNode = document.createElement("div");
		awardWordNode.id = "awardWordNode"; 
		awardWordNode.innerHTML = "<font color=white>Campaigns</font>";
		this.awardTitleDivNode.appendChild(awardWordNode);


		// create award list sub-div node
		var awardListDivNode = document.createElement("div");
		awardListDivNode.id = "achiPortalAwardList";

		// create award list left arrow, right arrow and award container
		var awardListLeftDivNode = document.createElement("div");
		awardListLeftDivNode.id = "achiPortalAppListLeft";

		this.awardListLeftArrowDivNode = document.createElement("div");
		this.awardListLeftArrowDivNode.id = "AppPortalLeftArrow"; 
		this.awardListLeftArrowDivNode.className = "achiPortalArrow";
		this.awardListLeftArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/leftArrow.png' />"
		this.awardListLeftArrowDivNode.style.visibility = "hidden"; 
		awardListLeftDivNode.appendChild(this.awardListLeftArrowDivNode);

		var awardListRightDivNode = document.createElement("div");
		awardListRightDivNode.id = "achiPortalAppListRight";

		this.awardListRightArrowDivNode = document.createElement("div");
		this.awardListRightArrowDivNode.id = "AppPortalRightArrow"; 
		this.awardListRightArrowDivNode.className = "achiPortalArrow";
		this.awardListRightArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/rightArrow.png' />"
		
		this.minLeft[2] = 1080 - ((serverDataObj.camps.length * 150) + 30);
		this.maxLeft[2] = 0;
		if (this.minLeft[2] >= 0) {
			this.awardListRightArrowDivNode.style.visibility = "hidden";
		}
		awardListRightDivNode.appendChild(this.awardListRightArrowDivNode);

		var awardListCtnDivNode = document.createElement("div");
		awardListCtnDivNode.id = "achiPortalAppListCtn";

		
		

		awardListDivNode.appendChild(awardListLeftDivNode);
		awardListCtnDivNode.appendChild(this.createAwardCell(serverDataObj)); 
		awardListDivNode.appendChild(awardListCtnDivNode);
		awardListDivNode.appendChild(awardListRightDivNode);

		// create award div node
		var awardDivNode = document.createElement("div");
		awardDivNode.id = "achiPortalAward";

		// append award title and award list sub-div nodes to award div node
		awardDivNode.appendChild(this.awardTitleDivNode);
		awardDivNode.appendChild(awardListDivNode);
		 
		return awardDivNode; 
	},

	createAwardCell : function(serverDataObj) {

		this.awardListInnerDivNode = document.createElement("div");
		this.awardListInnerDivNode.id = "achiPortalAppListInner";
		this.awardListInnerDivNode.style.left = "0px"; 
		this.awardListInnerDivNode.style.width = 150*serverDataObj.camps.length + 30  + "px";

		this.divLength[2] = serverDataObj.camps.length;
		var cellInterval = 0;
		for (var awardCellNum = 0; awardCellNum < this.divLength[2]; awardCellNum++) {
			var awardListCellDivNode = document.createElement("div");

			if (serverDataObj.camps[awardCellNum].state == "none") {
				awardListCellDivNode.className = "achiPortalAppListCellSmallGray";
			} else {
				awardListCellDivNode.className = "achiPortalAppListCellSmall";
			}

			// awardListCellDivNode.className = "achiPortalAppListCellSmall";
			cellInterval = cellInterval + 30;
			awardListCellDivNode.style.left = cellInterval + "px";
			awardListCellDivNode.id = "AwardPortal" + awardCellNum;
			awardListCellDivNode.innerHTML = "<img width=100% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/campImages/" 
				+ serverDataObj.camps[awardCellNum].camp_sn
				+ ".png' />"
				+ "<hidden id='" + awardListCellDivNode.id + "sn'"
				+ "value='"+ serverDataObj.camps[awardCellNum].camp_sn + "'/>"
				+ "<hidden id='" + awardListCellDivNode.id + "name'"
				+ "value='"+ serverDataObj.camps[awardCellNum].camp_name + "'/>"
				+ "<hidden id='" + awardListCellDivNode.id + "end'"
				+ "value='"+ serverDataObj.camps[awardCellNum].camp_end + "'/>"; 

			if (serverDataObj.camps[awardCellNum].state == "finished") {
				var cellStar = document.createElement("div");
				cellStar.id = "cellStar";
				cellStar.className = "cellStar";
				cellStar.innerHTML = "<img width=100% height=100% src='http://"
								   + accedo.achievement.config.serverIP + ":" 
								   + accedo.achievement.config.serverPort + "/" 
								   + accedo.achievement.config.pluginName + "/images/otherImages/cellStar.png' />";
				awardListCellDivNode.appendChild(cellStar);
			}

			this.awardListInnerDivNode.appendChild(awardListCellDivNode);
		}

		return this.awardListInnerDivNode; 
	},

	/**
	 * append all necessary child nodes and initiate the main page div node
	 * @return {div node} main page div node
	 */
	initMainDiv : function() {
		// create main page div node
		var mainDivNode = document.createElement("div");
		mainDivNode.id = "achiPortalMain"; 

		// append TITLE ajax container div node
		this.ajaxTitleDivNode = document.createElement("div");
		this.ajaxTitleDivNode.id = "achiPortalAjaxTitle";
		var titleCtnDivNode = document.createElement("div");
		titleCtnDivNode.id = "achiPortalTitleCtn";
		titleCtnDivNode.appendChild(this.ajaxTitleDivNode); 
		mainDivNode.appendChild(titleCtnDivNode); 

		// create main container div below Title node
		this.mainCtnNode = document.createElement("div");
		this.mainCtnNode.id = "achiPortalMainCtn"; 
		this.mainCtnNode.appendChild(this.createThreeRows()); 


		mainDivNode.appendChild(this.mainCtnNode);
		return mainDivNode; 
	},

	createThreeRows : function() {
		var threeRowsCtn = document.createElement("div");
		threeRowsCtn.id = "threeRowsCtn";

		// append APP div node
		this.ajaxAppDivNode = document.createElement("div");
		this.ajaxAppDivNode.id = "achiPortalAjaxApp";
		threeRowsCtn.appendChild(this.ajaxAppDivNode);
		// append BADGE div node
		this.ajaxBadgeDivNode = document.createElement("div");
		this.ajaxBadgeDivNode.id = "achiPortalAjaxApp";
		threeRowsCtn.appendChild(this.ajaxBadgeDivNode);
		// append AWARD div node
		this.ajaxAwardDivNode = document.createElement("div");
		this.ajaxAwardDivNode.id = "achiPortalAjaxApp";
		threeRowsCtn.appendChild(this.ajaxAwardDivNode);

		return threeRowsCtn;
	},

	changeTitleName : function(nodeid) {
		var idName = nodeid + "name"; 
		var hiddenNode = document.getElementById(idName);
		var hiddenValue = hiddenNode.getAttribute("value");
		if (this.idPrefix == "AppPortal") {
			// this.appTitleDivNode.innerHTML = "<font color=white>" + hiddenValue + "</font>";
		} else if (this.idPrefix == "BadgePortal") {
			// this.badgeTitleDivNode.innerHTML = "<font color=white>" + hiddenValue + "</font>";
		} else if (this.idPrefix == "AwardPortal") {
			// this.awardTitleDivNode.innerHTML = "<font color=white>" + hiddenValue + "</font>";
		}
	},
	moveCurrDiv : function(direction) {
		
		var divOldNode = document.getElementById(this.idPrefix + this.divCurrID[this.row]);
		if (divOldNode.className == "achiPortalAppListCellBig") {
			divOldNode.className = "achiPortalAppListCellSmall";
		} else if (divOldNode.className == "achiPortalAppListCellBigGray") {
			divOldNode.className = "achiPortalAppListCellSmallGray";
		}
		if (direction == "right" && this.divCurrID[this.row] < this.divLength[this.row] - 1) {
			
			// console.log("right button pressed!");
			this.divCurrID[this.row]++; 
			this.changeTitleName(this.idPrefix + this.divCurrID[this.row]); 
			if (this.moveCount[this.row] == 5) {
				var innerLeftValue = this.innerNode.offsetLeft - 150;
				this.innerNode.style.left = innerLeftValue + "px"; 

				if (innerLeftValue <= this.minLeft[this.row]) {
					this.rightArrowNode.style.visibility = "hidden"; 
				}
				if (innerLeftValue < this.maxLeft[this.row]) {
					this.leftArrowNode.style.visibility = "visible"; 
				}


			} else {
				this.moveCount[this.row]++; 
			}

		} else if (direction == "left" && this.divCurrID[this.row] > 0) {
			this.divCurrID[this.row]--; 
			this.changeTitleName(this.idPrefix + this.divCurrID[this.row]); 
			if (this.moveCount[this.row] == 0) {
				var innerLeftValue = this.innerNode.offsetLeft + 150;
				this.innerNode.style.left = innerLeftValue + "px";

				if (innerLeftValue >= this.maxLeft[this.row]) {
					this.leftArrowNode.style.visibility = "hidden"; 
				}
					
				if (innerLeftValue > this.minLeft[this.row]) {
					this.rightArrowNode.style.visibility = "visible"; 
				}

			} else {
				this.moveCount[this.row]--; 
			}
		} else if (direction == "down") {
			if (this.row == 2) {
				this.row = 0;
			} else {
				this.row++; 
			}
			if (this.row == 0) {
				this.idPrefix = "AppPortal";
				this.innerNode = this.appListInnerDivNode; 
				this.leftArrowNode = this.appListLeftArrowDivNode;
				this.rightArrowNode = this.appListRightArrowDivNode;
			} else if (this.row == 1) {
				this.idPrefix = "BadgePortal";
				this.innerNode = this.badgeListInnerDivNode;
				this.leftArrowNode = this.badgeListLeftArrowDivNode;
				this.rightArrowNode = this.badgeListRightArrowDivNode; 
			} else if (this.row == 2) {
				this.idPrefix = "AwardPortal";
				this.innerNode = this.awardListInnerDivNode; 
				this.leftArrowNode = this.awardListLeftArrowDivNode;
				this.rightArrowNode = this.awardListRightArrowDivNode;
			}

		} else if (direction == "up") {
			if (this.row == 0) {
				document.onkeydown = function(e) {
					accedo.achievement.achiPortalShow.titleKeysControl(e);
				};
				var newSocialButton = document.getElementById("social" + this.divTitleCurrID);
				newSocialButton.style.borderColor = "yellow";
				return;

			} else {
				this.row--; 
			}
			if (this.row == 0) {
				this.idPrefix = "AppPortal";
				this.innerNode = this.appListInnerDivNode; 
				this.leftArrowNode = this.appListLeftArrowDivNode;
				this.rightArrowNode = this.appListRightArrowDivNode;
			} else if (this.row == 1) {
				this.idPrefix = "BadgePortal";
				this.innerNode = this.badgeListInnerDivNode; 
				this.leftArrowNode = this.badgeListLeftArrowDivNode;
				this.rightArrowNode = this.badgeListRightArrowDivNode; 
			} else if (this.row == 2) {
				this.idPrefix = "AwardPortal";
				this.innerNode = this.awardListInnerDivNode;
				this.leftArrowNode = this.awardListLeftArrowDivNode;
				this.rightArrowNode = this.awardListRightArrowDivNode;
			}

		}
		var divNewNode = document.getElementById(this.idPrefix + this.divCurrID[this.row]);


		if (divNewNode.className == "achiPortalAppListCellSmall") {
			divNewNode.className = "achiPortalAppListCellBig";
		} else if (divNewNode.className == "achiPortalAppListCellSmallGray") {
			divNewNode.className = "achiPortalAppListCellBigGray";
		}

		
	},

	removeAchiPage : function () {
		var mainNode = document.getElementById("achiPortalMain");
		// var achiNode = document.getElementById("achiWordNode");
		// var badgeNode = document.getElementById("badgeWordNode");
		// var awardNode = document.getElementById("awardWordNode");
		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.removeChild(mainNode);
		// bodyNode.removeChild(achiNode);
		// bodyNode.removeChild(badgeNode);
		// bodyNode.removeChild(awardNode);
		document.onkeydown = this.oldOnkeydownFunc;
	},

	keysControl : function(e) {
		e = window.event || e;
		switch (e.keyCode) {
		// left button
		case 37:
			this.moveCurrDiv("left");
			break;
		// up button
		case 38:
			this.moveCurrDiv("up");
			break;
		// right button
		case 39:
			this.moveCurrDiv("right");
			break; 
		// down button
		case 40:
			this.moveCurrDiv("down");
			break;
		case 65:
			accedo.achievement.achiPortalFriendsMain.appendPage(this.userName); 

			break;

		// enter button
		case 13:
			var idName = this.idPrefix + this.divCurrID[this.row] + "sn"; 
			var hiddenNode = document.getElementById(idName);
			var hiddenValue = hiddenNode.getAttribute("value");

			var idNameName = this.idPrefix + this.divCurrID[this.row] + "name"; 
			var hiddenNameNode = document.getElementById(idNameName);
			var hiddenNameValue = hiddenNameNode.getAttribute("value");


			if (this.idPrefix == "AppPortal") {
				accedo.achievement.achiShow.appendAchiPage(hiddenNameValue, this.userName, hiddenValue);
			} else if (this.idPrefix == "BadgePortal") {
				accedo.achievement.achiPortalBadgeShow.appendPage(hiddenNameValue, hiddenValue, this.userName); 
			} else if (this.idPrefix == "AwardPortal") {
				var idCampEnd = this.idPrefix + this.divCurrID[this.row] + "end"; 
				var hiddenCampEndNode = document.getElementById(idCampEnd);
				var hiddenCampEndValue = hiddenCampEndNode.getAttribute("value");
				accedo.achievement.achiPortalCampShow.appendPage(hiddenNameValue, hiddenValue, hiddenCampEndValue, this.userName);
			}
			break;
		// esc button
		case 27:
			this.removeAchiPage();
			break;
		default:
			break;
		}
	},

	titleKeysControl : function(e) {
		e = window.event || e;
		switch (e.keyCode) {
		// left button
		case 37:
			this.titleMoveCurrDiv("left");
			break;
		// right button
		case 39:
			this.titleMoveCurrDiv("right");
			break; 
		// down button
		case 40:
			this.titleMoveCurrDiv("down");
			break;
		// enter button
		case 13:
			switch (this.divTitleCurrID) {
				case 0:
					accedo.achievement.achiPortalFriendsMain.appendProtalMainPage(this.userName);
					break;
				case 1:
					accedo.achievement.achiPortalFriendsMain.appendFriendsListPage(this.userName);
					break;
				case 2:
					accedo.achievement.achiPortalFriendsMain.appendFriendsSearchPage(this.userName); 
					break;
				case 3:
					break;
				default:
					break;
			}

			break;
		default:
			break;
		}
	},

	titleMoveCurrDiv : function(direction) {

		var oldSocialButton = document.getElementById("social" + this.divTitleCurrID);
		oldSocialButton.style.borderColor = "#333333";
		if (direction == "right") {
			if (this.divTitleCurrID == 4) {
				this.divTitleCurrID = 0;
			} else {
				this.divTitleCurrID++; 
			}
		} else if (direction == "left") {
			if (this.divTitleCurrID == 0) {
				this.divTitleCurrID = 4;
			} else {
				this.divTitleCurrID--; 
			}
		} else if (direction == "down") {
			document.onkeydown = function(e) {
					accedo.achievement.achiPortalShow.keysControl(e);
			};
			var divNewNode = document.getElementById(this.idPrefix + this.divCurrID[this.row]);
			if (divNewNode.className == "achiPortalAppListCellSmall") {
				divNewNode.className = "achiPortalAppListCellBig";
			} else if (divNewNode.className == "achiPortalAppListCellSmallGray") {
				divNewNode.className = "achiPortalAppListCellBigGray";
			}
			return;
		}

		var newSocialButton = document.getElementById("social" + this.divTitleCurrID);
		newSocialButton.style.borderColor = "yellow";

	}
}